<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('store_coupon.index.店铺优惠券')" />
    <!-- 查询条件 -->
    <div class="">
      <div class="flex_aic gap-10">
        <el-input
          v-model="queryParams.name"
          :placeholder="$t('store_coupon.index.请输入店铺名称')"
          class="flex1"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('store_coupon.index.店铺名称') }}</span>
          </template>
        </el-input>
        <el-input
          v-model="queryParams.name"
          :placeholder="$t('store_coupon.index.请输入优惠券名称')"
          class="flex1"
        >
          <template #prefix>
            <span class="color-555555">{{ $t('store_coupon.index.优惠券名称') }}</span>
          </template>
        </el-input>

        <el-select
          v-model="queryParams.status"
          :placeholder="$t('store_coupon.index.活动状态')"
          class="flex1"
        >
          <el-option :label="$t('store_coupon.index.全部')" value="" />
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          v-model="queryParams.type"
          :placeholder="$t('store_coupon.index.优惠券类型')"
          class="flex1"
        >
          <el-option :label="$t('store_coupon.index.全部')" value="" />
          <el-option :label="$t('store_coupon.index.满减券')" value="1" />
          <el-option :label="$t('store_coupon.index.折扣券')" value="2" />
        </el-select>

        <el-select
          v-model="queryParams.getType"
          :placeholder="$t('store_coupon.index.获取方式')"
          class="flex1"
        >
          <el-option :label="$t('store_coupon.index.全部')" value="" />
          <el-option :label="$t('store_coupon.index.免费领取')" value="1" />
          <el-option :label="$t('store_coupon.index.活动赠送')" value="2" />
        </el-select>
      </div>
      <div class="mt10">
        <el-date-picker
          v-model="queryParams.activityTime"
          type="daterange"
          :range-separator="$t('store_coupon.index.至')"
          :start-placeholder="$t('store_coupon.index.开始日期')"
          :end-placeholder="$t('store_coupon.index.结束日期')"
          style="width: calc((100% - 48px) / 5)"
          class="inline-block"
        />

        <el-date-picker
          v-model="queryParams.useTime"
          type="daterange"
          :range-separator="$t('store_coupon.index.至')"
          :start-placeholder="$t('store_coupon.index.开始日期')"
          :end-placeholder="$t('store_coupon.index.结束日期')"
          style="width: calc((100% - 48px) / 5)"
          class="inline-block ml10"
        />

        <div class="flex_aic float-right">
          <el-button @click="resetQuery">{{ $t('store_coupon.index.重置') }}</el-button>
          <el-button type="primary" @click="handleQuery">{{ $t('store_coupon.index.查询') }}</el-button>
        </div>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="handleAdd">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('store_coupon.index.新增优惠券') }}</span>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      border
    >
      <el-table-column type="index" :label="$t('store_coupon.index.序号')" width="60" />
      <el-table-column prop="name" :label="$t('store_coupon.index.店铺名称')" />
      <el-table-column prop="name" :label="$t('store_coupon.index.优惠券名称')" />
      <el-table-column prop="type" :label="$t('store_coupon.index.优惠券类型')" />
      <el-table-column prop="content" :label="$t('store_coupon.index.优惠内容')" />
      <el-table-column :label="$t('store_coupon.index.已领取已使用已发布')">
        <template #default="{ row }">
          <div style="color: #1890ff; font-size: 14px">
            {{ row.received }}/{{ row.used }}/{{ row.published }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activityTime" :label="$t('store_coupon.index.活动时间')" />
      <el-table-column prop="useTime" :label="$t('store_coupon.index.使用时间')" />
      <el-table-column
        prop="getType"
        :label="$t('store_coupon.index.领取方式')"
        :formatter="formatGetType"
      />
      <el-table-column
        prop="status"
        :label="$t('store_coupon.index.活动状态')"
        :formatter="formatStatus"
      />
      <el-table-column :label="$t('store_coupon.index.操作')" width="200">
        <template #default="{ row }">
          <div class="flex_aic_jcc">
            <div class="operationBtn">
              <el-button type="text" @click="handleView(row)">{{ $t('store_coupon.index.查看') }}</el-button>
            </div>
            <el-popconfirm
              width="300px"
              v-if="row.status === '2'"
              :title="$t('store_coupon.index.删除后不可恢复是否确定删除')"
              @confirm="handleDelete(row)"
              :confirm-button-text="$t('store_coupon.index.确定')"
              :cancel-button-text="$t('store_coupon.index.取消')"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small">{{ $t('store_coupon.index.删除') }}</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              width="300px"
              v-if="row.status === '1'"
              :title="$t('store_coupon.index.失效后不可恢复是否确定失效')"
              @confirm="handleDelete(row)"
              :confirm-button-text="$t('store_coupon.index.确定')"
              :cancel-button-text="$t('store_coupon.index.取消')"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small">{{ $t('store_coupon.index.失效') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t } = useI18n();

// 领取方式选项
const getTypeOptions = computed(() => [
    { label: t('store_coupon.index.免费领取'), value: "1" },
    { label: t('store_coupon.index.活动赠送'), value: "2" },
]);

// 活动状态选项
const statusOptions = computed(() => [
    { label: t('store_coupon.index.进行中'), value: "1" },
    { label: t('store_coupon.index.已结束'), value: "2" },
]);

// 格式化方法
const formatStatus = ({ status }) => {
    const found = statusOptions.value.find((item) => item.value === status);
    return found ? found.label : status;
};

const formatGetType = ({ getType }) => {
    const found = getTypeOptions.value.find((item) => item.value === getType);
    return found ? found.label : getType;
};

// 查询参数
const queryParams = ref({
    name: "",
    status: "",
    type: "",
    activityTime: [],
    getType: "",
    useTime: [],
});

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 表格数据
const tableData = ref(
    Array.from({ length: 10 }, (_, index) => ({
        name: `优惠券${index + 1}`,
        type: index % 2 === 0 ? "满减券" : "折扣券",
        content: index % 2 === 0 ? "满100减10" : "打8折",
        received: Math.floor(Math.random() * 1000),
        used: Math.floor(Math.random() * 1000),
        published: Math.floor(Math.random() * 1000),
        activityTime: "2024-01-01 至 2024-12-31",
        useTime: "2024-01-01 至 2024-12-31",
        getType: index % 2 === 0 ? "1" : "2",
        status: index % 2 === 0 ? "1" : "2",
        recommend: Math.random() > 0.5,
    }))
);

// 方法
const resetQuery = () => {
    queryParams.value = {
        name: "",
        status: "",
        type: "",
        activityTime: [],
        getType: "",
        useTime: [],
    };
};

const handleQuery = () => {
    // 实现查询逻辑
};

const handleAdd = () => {
    router.push("/manage_product/store_coupon/add");
};

const handleView = (row) => {
    router.push({
        path: "/manage_product/store_coupon/detail",
        query: { id: row.id },
    });
};

const handleDelete = (row) => {
    // 删除
};

const handleSizeChange = (val) => {
    pageSize.value = val;
    handleQuery();
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
    handleQuery();
};
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.operationBtn {
  display: flex;
  align-items: center;
  padding-right: 5px;

  &::after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #ddd;
    margin-left: 5px;
  }
}
</style>
